
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Normalizing State Shape · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="UpdatingNormalizedData.html" />
    
    
    <link rel="prev" href="BeyondCombineReducers.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../">
            
                <a href="../../">
            
                    
                    Read Me
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../../introduction/">
            
                <a href="../../introduction/">
            
                    
                    Introduction
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../../introduction/Motivation.html">
            
                <a href="../../introduction/Motivation.html">
            
                    
                    Motivation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../../introduction/CoreConcepts.html">
            
                <a href="../../introduction/CoreConcepts.html">
            
                    
                    Core Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../../introduction/ThreePrinciples.html">
            
                <a href="../../introduction/ThreePrinciples.html">
            
                    
                    Three Principles
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../../introduction/PriorArt.html">
            
                <a href="../../introduction/PriorArt.html">
            
                    
                    Prior Art
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../../introduction/Ecosystem.html">
            
                <a href="../../introduction/Ecosystem.html">
            
                    
                    Ecosystem
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../../introduction/Examples.html">
            
                <a href="../../introduction/Examples.html">
            
                    
                    Examples
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../../basics/">
            
                <a href="../../basics/">
            
                    
                    Basics
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../../basics/Actions.html">
            
                <a href="../../basics/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../../basics/Reducers.html">
            
                <a href="../../basics/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="../../basics/Store.html">
            
                <a href="../../basics/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="../../basics/DataFlow.html">
            
                <a href="../../basics/DataFlow.html">
            
                    
                    Data Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="../../basics/UsageWithReact.html">
            
                <a href="../../basics/UsageWithReact.html">
            
                    
                    Usage with React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="../../basics/ExampleTodoList.html">
            
                <a href="../../basics/ExampleTodoList.html">
            
                    
                    Example: Todo List
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../../advanced/">
            
                <a href="../../advanced/">
            
                    
                    Advanced
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../../advanced/AsyncActions.html">
            
                <a href="../../advanced/AsyncActions.html">
            
                    
                    Async Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../../advanced/AsyncFlow.html">
            
                <a href="../../advanced/AsyncFlow.html">
            
                    
                    Async Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../../advanced/Middleware.html">
            
                <a href="../../advanced/Middleware.html">
            
                    
                    Middleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../../advanced/UsageWithReactRouter.html">
            
                <a href="../../advanced/UsageWithReactRouter.html">
            
                    
                    Usage with React Router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../../advanced/ExampleRedditAPI.html">
            
                <a href="../../advanced/ExampleRedditAPI.html">
            
                    
                    Example: Reddit API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" >
            
                <span>
            
                    
                    Next Steps
            
                </span>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../">
            
                <a href="../">
            
                    
                    Recipes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../MigratingToRedux.html">
            
                <a href="../MigratingToRedux.html">
            
                    
                    Migrating to Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../UsingObjectSpreadOperator.html">
            
                <a href="../UsingObjectSpreadOperator.html">
            
                    
                    Using Object Spread Operator
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../ReducingBoilerplate.html">
            
                <a href="../ReducingBoilerplate.html">
            
                    
                    Reducing Boilerplate
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../ServerRendering.html">
            
                <a href="../ServerRendering.html">
            
                    
                    Server Rendering
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../WritingTests.html">
            
                <a href="../WritingTests.html">
            
                    
                    Writing Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../ComputingDerivedData.html">
            
                <a href="../ComputingDerivedData.html">
            
                    
                    Computing Derived Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../ImplementingUndoHistory.html">
            
                <a href="../ImplementingUndoHistory.html">
            
                    
                    Implementing Undo History
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../IsolatingSubapps.html">
            
                <a href="../IsolatingSubapps.html">
            
                    
                    Isolating Subapps
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="../StructuringReducers.html">
            
                <a href="../StructuringReducers.html">
            
                    
                    Structuring Reducers
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.9.1" data-path="PrerequisiteConcepts.html">
            
                <a href="PrerequisiteConcepts.html">
            
                    
                    Prerequisite Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.2" data-path="BasicReducerStructure.html">
            
                <a href="BasicReducerStructure.html">
            
                    
                    Basic Reducer Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.3" data-path="SplittingReducerLogic.html">
            
                <a href="SplittingReducerLogic.html">
            
                    
                    Splitting Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.4" data-path="RefactoringReducersExample.html">
            
                <a href="RefactoringReducersExample.html">
            
                    
                    Refactoring Reducers Example
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.5" data-path="UsingCombineReducers.html">
            
                <a href="UsingCombineReducers.html">
            
                    
                    Using combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.6" data-path="BeyondCombineReducers.html">
            
                <a href="BeyondCombineReducers.html">
            
                    
                    Beyond combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.5.9.7" data-path="NormalizingStateShape.html">
            
                <a href="NormalizingStateShape.html">
            
                    
                    Normalizing State Shape
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.8" data-path="UpdatingNormalizedData.html">
            
                <a href="UpdatingNormalizedData.html">
            
                    
                    Updating Normalized Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.9" data-path="ReusingReducerLogic.html">
            
                <a href="ReusingReducerLogic.html">
            
                    
                    Reusing Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.10" data-path="ImmutableUpdatePatterns.html">
            
                <a href="ImmutableUpdatePatterns.html">
            
                    
                    Immutable Update Patterns
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.11" data-path="InitializingState.html">
            
                <a href="InitializingState.html">
            
                    
                    Initializing State
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="../UsingImmutableJS.html">
            
                <a href="../UsingImmutableJS.html">
            
                    
                    Using Immutable.JS with Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../../FAQ.html">
            
                <a href="../../FAQ.html">
            
                    
                    FAQ
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../../faq/General.html">
            
                <a href="../../faq/General.html">
            
                    
                    General
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../../faq/Reducers.html">
            
                <a href="../../faq/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../../faq/OrganizingState.html">
            
                <a href="../../faq/OrganizingState.html">
            
                    
                    Organizing State
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../../faq/StoreSetup.html">
            
                <a href="../../faq/StoreSetup.html">
            
                    
                    Store Setup
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../../faq/Actions.html">
            
                <a href="../../faq/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../../faq/ImmutableData.html">
            
                <a href="../../faq/ImmutableData.html">
            
                    
                    Immutable Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../../faq/CodeStructure.html">
            
                <a href="../../faq/CodeStructure.html">
            
                    
                    Code Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="../../faq/Performance.html">
            
                <a href="../../faq/Performance.html">
            
                    
                    Performance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="../../faq/ReactRedux.html">
            
                <a href="../../faq/ReactRedux.html">
            
                    
                    React Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="../../faq/Miscellaneous.html">
            
                <a href="../../faq/Miscellaneous.html">
            
                    
                    Miscellaneous
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../../Troubleshooting.html">
            
                <a href="../../Troubleshooting.html">
            
                    
                    Troubleshooting
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../../Glossary.html">
            
                <a href="../../Glossary.html">
            
                    
                    Glossary
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../../api/">
            
                <a href="../../api/">
            
                    
                    API Reference
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="../../api/createStore.html">
            
                <a href="../../api/createStore.html">
            
                    
                    createStore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.2" data-path="../../api/Store.html">
            
                <a href="../../api/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.3" data-path="../../api/combineReducers.html">
            
                <a href="../../api/combineReducers.html">
            
                    
                    combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.4" data-path="../../api/applyMiddleware.html">
            
                <a href="../../api/applyMiddleware.html">
            
                    
                    applyMiddleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.5" data-path="../../api/bindActionCreators.html">
            
                <a href="../../api/bindActionCreators.html">
            
                    
                    bindActionCreators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.6" data-path="../../api/compose.html">
            
                <a href="../../api/compose.html">
            
                    
                    compose
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../../CHANGELOG.md">
            
                <span>
            
                    
                    Change Log
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../../PATRONS.md">
            
                <span>
            
                    
                    Patrons
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../../Feedback.html">
            
                <a href="../../Feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../.." >Normalizing State Shape</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="normalizing-state-shape">Normalizing State Shape</h1>
<p>Many applications deal with data that is nested or relational in nature.  For example, a blog editor could have many Posts, each Post could have many Comments, and both Posts and Comments would be written by a User.  Data for this kind of application might look like:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> blogPosts = [
    {
        id : <span class="hljs-string">&quot;post1&quot;</span>,
        author : {username : <span class="hljs-string">&quot;user1&quot;</span>, name : <span class="hljs-string">&quot;User 1&quot;</span>},
        body : <span class="hljs-string">&quot;......&quot;</span>,
        comments : [
            {
                id : <span class="hljs-string">&quot;comment1&quot;</span>,
                author : {username : <span class="hljs-string">&quot;user2&quot;</span>, name : <span class="hljs-string">&quot;User 2&quot;</span>},
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            },
            {
                id : <span class="hljs-string">&quot;comment2&quot;</span>,
                author : {username : <span class="hljs-string">&quot;user3&quot;</span>, name : <span class="hljs-string">&quot;User 3&quot;</span>},
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            }
        ]    
    },
    {
        id : <span class="hljs-string">&quot;post2&quot;</span>,
        author : {username : <span class="hljs-string">&quot;user2&quot;</span>, name : <span class="hljs-string">&quot;User 2&quot;</span>},
        body : <span class="hljs-string">&quot;......&quot;</span>,
        comments : [
            {
                id : <span class="hljs-string">&quot;comment3&quot;</span>,
                author : {username : <span class="hljs-string">&quot;user3&quot;</span>, name : <span class="hljs-string">&quot;User 3&quot;</span>},
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            },
            {
                id : <span class="hljs-string">&quot;comment4&quot;</span>,
                author : {username : <span class="hljs-string">&quot;user1&quot;</span>, name : <span class="hljs-string">&quot;User 1&quot;</span>},
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            },
            {
                id : <span class="hljs-string">&quot;comment5&quot;</span>,
                author : {username : <span class="hljs-string">&quot;user3&quot;</span>, name : <span class="hljs-string">&quot;User 3&quot;</span>},
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            }
        ]    
    }
    <span class="hljs-comment">// and repeat many times</span>
]
</code></pre>
<p>Notice that the structure of the data is a bit complex, and some of the data is repeated.  This is a concern for several reasons:</p>
<ul>
<li>When a piece of data is duplicated in several places, it becomes harder to make sure that it is updated appropriately.</li>
<li>Nested data means that the corresponding <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> logic has to be more nested or more complex.  In particular, trying to update a deeply nested field can become very ugly very fast.</li>
<li>Since immutable data updates require all ancestors in the <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> tree to be copied and updated as well, and new object references will cause connected UI components to re-render, an update to a deeply nested data object could force totally unrelated UI components to re-render even if the data they&apos;re displaying hasn&apos;t actually changed.</li>
</ul>
<p>Because of this, the recommended approach to managing relational or nested data in a Redux <a href="../../Glossary.html#store" class="glossary-term" title="">store</a> is to treat a portion of your <a href="../../Glossary.html#store" class="glossary-term" title="">store</a> as if it were a database, and keep that data in a <em>normalized</em> form.  </p>
<h2 id="designing-a-normalized-state">Designing a Normalized State</h2>
<p>The basic concepts of normalizing data are:</p>
<ul>
<li>Each type of data gets its own &quot;table&quot; in the <a href="../../Glossary.html#state" class="glossary-term" title="">state</a>.</li>
<li>Each &quot;data table&quot; should <a href="../../Glossary.html#store" class="glossary-term" title="">store</a> the individual items in an object, with the IDs of the items as keys and the items themselves as the values.</li>
<li>Any references to individual items should be done by storing the item&apos;s ID.</li>
<li>Arrays of IDs should be used to indicate ordering.</li>
</ul>
<p>An example of a normalized <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> structure for the blog example above might look like:</p>
<pre><code class="lang-js">{
    posts : {
        byId : {
            <span class="hljs-string">&quot;post1&quot;</span> : {
                id : <span class="hljs-string">&quot;post1&quot;</span>,
                author : <span class="hljs-string">&quot;user1&quot;</span>,
                body : <span class="hljs-string">&quot;......&quot;</span>,
                comments : [<span class="hljs-string">&quot;comment1&quot;</span>, <span class="hljs-string">&quot;comment2&quot;</span>]    
            },
            <span class="hljs-string">&quot;post2&quot;</span> : {
                id : <span class="hljs-string">&quot;post2&quot;</span>,
                author : <span class="hljs-string">&quot;user2&quot;</span>,
                body : <span class="hljs-string">&quot;......&quot;</span>,
                comments : [<span class="hljs-string">&quot;comment3&quot;</span>, <span class="hljs-string">&quot;comment4&quot;</span>, <span class="hljs-string">&quot;comment5&quot;</span>]    
            }
        }
        allIds : [<span class="hljs-string">&quot;post1&quot;</span>, <span class="hljs-string">&quot;post2&quot;</span>]
    },
    comments : {
        byId : {
            <span class="hljs-string">&quot;comment1&quot;</span> : {
                id : <span class="hljs-string">&quot;comment1&quot;</span>,
                author : <span class="hljs-string">&quot;user2&quot;</span>,
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            },
            <span class="hljs-string">&quot;comment2&quot;</span> : {
                id : <span class="hljs-string">&quot;comment2&quot;</span>,
                author : <span class="hljs-string">&quot;user3&quot;</span>,
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            },
            <span class="hljs-string">&quot;comment3&quot;</span> : {
                id : <span class="hljs-string">&quot;comment3&quot;</span>,
                author : <span class="hljs-string">&quot;user3&quot;</span>,
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            },
            <span class="hljs-string">&quot;comment4&quot;</span> : {
                id : <span class="hljs-string">&quot;comment4&quot;</span>,
                author : <span class="hljs-string">&quot;user1&quot;</span>,
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            },
            <span class="hljs-string">&quot;comment5&quot;</span> : {
                id : <span class="hljs-string">&quot;comment5&quot;</span>,
                author : <span class="hljs-string">&quot;user3&quot;</span>,
                comment : <span class="hljs-string">&quot;.....&quot;</span>,
            },
        },
        allIds : [<span class="hljs-string">&quot;comment1&quot;</span>, <span class="hljs-string">&quot;comment2&quot;</span>, <span class="hljs-string">&quot;comment3&quot;</span>, <span class="hljs-string">&quot;commment4&quot;</span>, <span class="hljs-string">&quot;comment5&quot;</span>]
    },
    users : {
        byId : {
            <span class="hljs-string">&quot;user1&quot;</span> : {
                username : <span class="hljs-string">&quot;user1&quot;</span>,
                name : <span class="hljs-string">&quot;User 1&quot;</span>,
            }
            <span class="hljs-string">&quot;user2&quot;</span> : {
                username : <span class="hljs-string">&quot;user2&quot;</span>,
                name : <span class="hljs-string">&quot;User 2&quot;</span>,
            }
            <span class="hljs-string">&quot;user3&quot;</span> : {
                username : <span class="hljs-string">&quot;user3&quot;</span>,
                name : <span class="hljs-string">&quot;User 3&quot;</span>,
            }
        },
        allIds : [<span class="hljs-string">&quot;user1&quot;</span>, <span class="hljs-string">&quot;user2&quot;</span>, <span class="hljs-string">&quot;user3&quot;</span>]
    }
}
</code></pre>
<p>This <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> structure is much flatter overall.  Compared to the original nested format, this is an improvement in several ways:</p>
<ul>
<li>Because each item is only defined in one place, we don&apos;t have to try to make changes in multiple places if that item is updated.</li>
<li>The <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> logic doesn&apos;t have to deal with deep levels of nesting, so it will probably be much simpler.</li>
<li>The logic for retrieving or updating a given item is now fairly simple and consistent.  Given an item&apos;s type and its ID, we can directly look it up in a couple simple steps, without having to dig through other objects to find it.</li>
<li>Since each data type is separated, an update like changing the text of a comment would only require new copies of the &quot;comments &gt; byId &gt; comment&quot; portion of the tree.  This will generally mean fewer portions of the UI that need to update because their data has changed.  In contrast, updating a comment in the original nested shape would have required updating the comment object, the parent post object, the array of all post objects, and likely have caused <em>all</em> of the Post components and Comment components in the UI to re-render themselves.</li>
</ul>
<p>Note that a normalized <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> structure generally implies that more components are connected and each component is responsible for looking up its own data, as opposed to a few connected components looking up large amounts of data and passing all that data downwards.  As it turns out, having connected parent components simply pass item IDs to connected children is a good pattern for optimizing UI performance in a React Redux application, so keeping <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> normalized plays a key role in improving performance.</p>
<h2 id="organizing-normalized-data-in-state">Organizing Normalized Data in State</h2>
<p>A typical application will likely have a mixture of relational data and non-relational data.  While there is no single rule for exactly how those different types of data should be organized, one common pattern is to put the relational &quot;tables&quot; under a common parent key, such as &quot;entities&quot;.  A <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> structure using this approach might look like:</p>
<pre><code class="lang-js">{
    simpleDomainData1: {....},
    simpleDomainData2: {....}
    entities : {
        entityType1 : {....},
        entityType2 : {....}
    }
    ui : {
        uiSection1 : {....},
        uiSection2 : {....}
    }
}
</code></pre>
<p>This could be expanded in a number of ways.  For example, an application that does a lot of editing of entities might want to keep two sets of &quot;tables&quot; in the <a href="../../Glossary.html#state" class="glossary-term" title="">state</a>, one for the &quot;current&quot; item values and one for the &quot;work-in-progress&quot; item values.  When an item is edited, its values could be copied into the &quot;work-in-progress&quot; section, and any actions that update it would be applied to the &quot;work-in-progress&quot; copy, allowing the editing form to be controlled by that set of data while another part of the UI still refers to the original version.  &quot;Resetting&quot; the edit form would simply require removing the item from the &quot;work-in-progress&quot; section and re-copying the original data from &quot;current&quot; to &quot;work-in-progress&quot;, while &quot;applying&quot; the edits would involve copying the values from the &quot;work-in-progress&quot; section to the &quot;current&quot; section.</p>
<h2 id="relationships-and-tables">Relationships and Tables</h2>
<p>Because we&apos;re treating a portion of our Redux <a href="../../Glossary.html#store" class="glossary-term" title="">store</a> as a &quot;database&quot;, many of the principles of database design also apply here as well.  For example, if we have a many-to-many relationship, we can model that using an intermediate table that stores the IDs of the corresponding items (often known as a &quot;join table&quot; or an &quot;associative table&quot;).  For consistency, we would probably also want to use the same <code>byId</code> and <code>allIds</code> approach that we used for the actual item tables, like this:</p>
<pre><code class="lang-js">{
    entities: {
        authors : { byId : {}, allIds : [] },
        books : { byId : {}, allIds : [] },
        authorBook : {
            byId : {
                <span class="hljs-number">1</span> : {
                    id : <span class="hljs-number">1</span>,
                    authorId : <span class="hljs-number">5</span>,
                    bookId : <span class="hljs-number">22</span>
                },
                <span class="hljs-number">2</span> : {
                    id : <span class="hljs-number">2</span>,
                    authorId : <span class="hljs-number">5</span>,
                    bookId : <span class="hljs-number">15</span>,
                }
                <span class="hljs-number">3</span> : {
                    id : <span class="hljs-number">3</span>,
                    authorId : <span class="hljs-number">42</span>,
                    bookId : <span class="hljs-number">12</span>
                }
            },
            allIds : [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]

        }
    }
}
</code></pre>
<p>Operations like &quot;Look up all books by this author&quot; can then accomplished with a single loop over the join table.  Given the typical amounts of data in a client application and the speed of Javascript engines, this kind of operation is likely to have sufficiently fast performance for most use cases.</p>
<h2 id="normalizing-nested-data">Normalizing Nested Data</h2>
<p>Because APIs frequently send back data in a nested form, that data needs to be transformed into a normalized shape before it can be included in the <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> tree.  The <a href="https://github.com/paularmstrong/normalizr" target="_blank">Normalizr</a> library is usually used for this task.  You can define schema types and relations, feed the schema and the response data to Normalizr, and it will output a normalized transformation of the response.  That output can then be included in an <a href="../../Glossary.html#action" class="glossary-term" title="">action</a> and used to update the <a href="../../Glossary.html#store" class="glossary-term" title="">store</a>.  See the Normalizr documentation for more details on its usage.</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="BeyondCombineReducers.html" class="navigation navigation-prev " aria-label="Previous page: Beyond combineReducers">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="UpdatingNormalizedData.html" class="navigation navigation-next " aria-label="Next page: Updating Normalized Data">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Normalizing State Shape","level":"1.5.9.7","depth":3,"next":{"title":"Updating Normalized Data","level":"1.5.9.8","depth":3,"path":"recipes/reducers/UpdatingNormalizedData.md","ref":"./recipes/reducers/UpdatingNormalizedData.md","articles":[]},"previous":{"title":"Beyond combineReducers","level":"1.5.9.6","depth":3,"path":"recipes/reducers/BeyondCombineReducers.md","ref":"./recipes/reducers/BeyondCombineReducers.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"recipes/reducers/NormalizingStateShape.md","mtime":"2017-03-13T14:28:11.351Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-03-15T14:47:19.389Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>
    
        
        <script src="../../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

